<template>
  <div>
    <h2>添加</h2>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>类型</td>
          <td>
            <select v-model="form.leixing">
              <option value="">请选择</option>
              <option>7折优惠</option>
              <option>打骨折</option>
              <option>优惠个蛋</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>标题</td>
          <td>
            <input type="text" v-model="form.biaoti" />
          </td>
        </tr>
        <tr>
          <td>图片</td>
          <td>
            <img :src="form.tupian" style="display: ''; max-width: 100px" />
            <input type="file" style="display: ''" id="file" @change="Tupian" />
          </td>
        </tr>
        <tr>
          <td>地址</td>
          <td>
            <input type="text" v-model="form.adder" />
          </td>
        </tr>
        <tr>
          <td>须知</td>
          <td>
            <textarea v-model="form.xuzhi"></textarea>
          </td>
        </tr>
        <tr>
          <td>手机号</td>
          <td>
            <input type="text" v-model="form.phone" />
          </td>
        </tr>
        <tr>
          <td>状态</td>
          <td>
            <input type="radio" v-model="form.start" value="启用" name="start" checked/>启用
            <input type="radio" v-model="form.start" value="停用"   name="start" />停用
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <button @click="Add">添加</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import "bootstrap/dist/css/bootstrap.min.css";
import { constants } from "buffer";

const router = useRouter();
const form: any = reactive({
  id: 0,
  leixing: "",
  biaoti: "",
  tupian: "",
  adder: "",
  xuzhi: "",
  phone: "",
  start: "",
});

const Add=()=>{
    if(!form.biaoti){
        alert("优惠卷标题不能为空");
        return;
    }

    axios.post("https://localhost:7015/api/youhui/Addyou",form).then(res=>{
        if(res.data>0){
            alert("添加成功");
            router.push("/showyou");
        }
        else
        {
            alert("添加失败");
        }
    })

}

const Tupian=(e:any)=>{
    var formData=new FormData();
    var file=e.target.files[0];
    formData.append("file",file)
    axios.post("https://localhost:7015/api/youhui",formData).then(res=>{
        form.tupian=res.data;
    }).catch(err=>{
        console.log(err);
    })
}




</script>

<style scoped></style>
